<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员推荐 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f9fafb;
            color: #111827;
        }
        
        .section-title {
            position: relative;
            display: inline-block;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 60px;
            height: 3px;
            background-color: #3b82f6;
        }
        
        .member-card {
            transition: all 0.3s ease;
            height: 100%;
        }
        
        .member-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }
        
        .stats {
            font-size: 0.875rem;
        }
        
        .stats i {
            width: 16px;
            text-align: center;
        }
        
        .member-badge {
            font-size: 0.75rem;
            padding: 0.2rem 0.5rem;
        }
        
        .image-container {
            position: relative;
            overflow: hidden;
        }
        
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 12px;
        }
        
        .no-image-placeholder {
            background-color: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
        }
        
        .grid-masonry {
            column-count: 1;
            column-gap: 1rem;
        }
        
        @media (min-width: 768px) {
            .grid-masonry {
                column-count: 2;
            }
        }
        
        @media (min-width: 992px) {
            .grid-masonry {
                column-count: 3;
            }
        }
        
        .masonry-item {
            break-inside: avoid;
            margin-bottom: 1rem;
        }
        
        .list-item {
            transition: background-color 0.2s ease;
        }
        
        .list-item:hover {
            background-color: #f1f5f9;
        }
        
        .featured-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="#">
                <i class="fas fa-connectdevelop"></i>
                <span>社交平台</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">会员推荐</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">话题</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <div class="search-container d-none d-md-block">
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" placeholder="搜索会员...">
                            <button class="btn btn-outline-light" type="button">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                    <button class="btn btn-outline-light">
                        <i class="fas fa-bell"></i>
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle rounded-circle" type="button" data-bs-toggle="dropdown">
                            <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" width="36" height="36" class="rounded-circle">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人中心</a></li>
                            <li><a class="dropdown-item" href="#">我的收藏</a></li>
                            <li><a class="dropdown-item" href="#">设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container py-5">
        <!-- 页面标题 -->
        <div class="text-center mb-8">
            <h1 class="section-title">会员推荐</h1>
            <p class="text-muted mt-3">发现优质会员，拓展您的社交圈</p>
        </div>

        <!-- 推荐分类标签 -->
        <div class="d-flex flex-wrap justify-content-center gap-2 mb-8">
            <button class="btn btn-primary">全部</button>
            <button class="btn btn-outline-primary">热门推荐</button>
            <button class="btn btn-outline-primary">新加入会员</button>
            <button class="btn btn-outline-primary">内容创作者</button>
            <button class="btn btn-outline-primary">活跃会员</button>
            <button class="btn btn-outline-primary">行业专家</button>
        </div>

        <!-- 1. 网格布局 - 卡片式 -->
        <section class="mb-12">
            <h2 class="section-title mb-4">热门会员</h2>
            <div class="row gap-4">
                <!-- 会员卡片 1 - 单张图片 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card member-card">
                        <div class="image-container">
                            <img src="https://picsum.photos/id/1025/600/400" alt="旅行摄影作品展示" class="card-img-top w-100" style="height: 200px; object-fit: cover;">
                            <span class="image-count">1</span>
                            <span class="badge bg-danger featured-badge">热门</span>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h5 class="card-title mb-1">环球旅行家</h5>
                                    <p class="text-muted mb-0">探索世界的每个角落</p>
                                </div>
                                <span class="badge member-badge bg-primary">创作者</span>
                            </div>
                            
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1012/40/40" alt="会员头像" class="rounded-circle" width="32" height="32">
                                <span class="text-sm">李明</span>
                            </div>
                            
                            <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                职业旅行摄影师，曾游历30多个国家，分享各地风土人情和旅行攻略。
                            </p>
                            
                            <div class="d-flex justify-content-between stats text-muted border-top pt-2">
                                <div><i class="fas fa-eye me-1"></i> 12.5k</div>
                                <div><i class="fas fa-comment me-1"></i> 342</div>
                                <div><i class="fas fa-bookmark me-1"></i> 1.2k</div>
                                <div><i class="fas fa-heart me-1"></i> 5.8k</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 会员卡片 2 - 多张图片 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card member-card">
                        <div class="image-container">
                            <div class="row g-1">
                                <div class="col-6">
                                    <img src="https://picsum.photos/id/102/300/300" alt="美食作品1" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="col-6">
                                    <div class="row g-1 h-100">
                                        <div class="col-12">
                                            <img src="https://picsum.photos/id/1080/300/150" alt="美食作品2" class="w-100 h-100 object-fit-cover">
                                        </div>
                                        <div class="col-12">
                                            <img src="https://picsum.photos/id/292/300/150" alt="美食作品3" class="w-100 h-100 object-fit-cover">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span class="image-count">12+</span>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h5 class="card-title mb-1">美食达人</h5>
                                    <p class="text-muted mb-0">分享美食制作与品尝体验</p>
                                </div>
                                <span class="badge member-badge bg-success">专家</span>
                            </div>
                            
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1027/40/40" alt="会员头像" class="rounded-circle" width="32" height="32">
                                <span class="text-sm">王芳</span>
                            </div>
                            
                            <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                高级厨师，擅长中西融合料理，定期分享食谱和烹饪技巧，拥有自己的美食工作室。
                            </p>
                            
                            <div class="d-flex justify-content-between stats text-muted border-top pt-2">
                                <div><i class="fas fa-eye me-1"></i> 8.7k</div>
                                <div><i class="fas fa-comment me-1"></i> 512</div>
                                <div><i class="fas fa-bookmark me-1"></i> 2.3k</div>
                                <div><i class="fas fa-heart me-1"></i> 4.5k</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 会员卡片 3 - 无图片 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card member-card">
                        <div class="image-container no-image-placeholder" style="height: 200px;">
                            <i class="fas fa-pen-fancy fa-3x"></i>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h5 class="card-title mb-1">文学创作者</h5>
                                    <p class="text-muted mb-0">分享原创小说与诗歌</p>
                                </div>
                                <span class="badge member-badge bg-purple">作家</span>
                            </div>
                            
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1074/40/40" alt="会员头像" class="rounded-circle" width="32" height="32">
                                <span class="text-sm">张伟</span>
                            </div>
                            
                            <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                自由撰稿人，发表过多篇短篇小说和诗歌，专注于都市情感和生活感悟类创作。
                            </p>
                            
                            <div class="d-flex justify-content-between stats text-muted border-top pt-2">
                                <div><i class="fas fa-eye me-1"></i> 5.3k</div>
                                <div><i class="fas fa-comment me-1"></i> 289</div>
                                <div><i class="fas fa-bookmark me-1"></i> 1.8k</div>
                                <div><i class="fas fa-heart me-1"></i> 3.2k</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 2. 瀑布流布局 -->
        <section class="mb-12">
            <h2 class="section-title mb-4">精选内容会员</h2>
            <div class="grid-masonry">
                <!-- 瀑布流项目 1 -->
                <div class="masonry-item">
                    <div class="card member-card">
                        <div class="image-container">
                            <img src="https://picsum.photos/id/1059/600/800" alt="艺术摄影作品" class="card-img-top w-100" style="object-fit: cover;">
                            <span class="image-count">5</span>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title mb-2">艺术摄影师</h5>
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1062/40/40" alt="会员头像" class="rounded-circle" width="28" height="28">
                                <span class="text-sm">刘艺</span>
                            </div>
                            <p class="card-text text-sm text-muted mb-3">专注于人文与风景摄影，作品曾在多个摄影展展出。</p>
                            <div class="d-flex justify-content-between stats text-muted">
                                <div><i class="fas fa-eye me-1"></i> 6.2k</div>
                                <div><i class="fas fa-heart me-1"></i> 2.9k</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 瀑布流项目 2 -->
                <div class="masonry-item">
                    <div class="card member-card">
                        <div class="image-container">
                            <div class="row g-1">
                                <div class="col-12">
                                    <img src="https://picsum.photos/id/1060/600/300" alt="健身成果展示1" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="col-6">
                                    <img src="https://picsum.photos/id/1080/300/300" alt="健身成果展示2" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="col-6">
                                    <img src="https://picsum.photos/id/1081/300/300" alt="健身成果展示3" class="w-100 h-100 object-fit-cover">
                                </div>
                            </div>
                            <span class="image-count">8</span>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title mb-2">健身教练</h5>
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1066/40/40" alt="会员头像" class="rounded-circle" width="28" height="28">
                                <span class="text-sm">赵强</span>
                            </div>
                            <p class="card-text text-sm text-muted mb-3">专业健身教练，分享科学健身方法和营养搭配建议。</p>
                            <div class="d-flex justify-content-between stats text-muted">
                                <div><i class="fas fa-eye me-1"></i> 9.4k</div>
                                <div><i class="fas fa-heart me-1"></i> 4.1k</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 瀑布流项目 3 - 无图片 -->
                <div class="masonry-item">
                    <div class="card member-card">
                        <div class="image-container no-image-placeholder" style="height: 180px;">
                            <i class="fas fa-code fa-3x"></i>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title mb-2">编程技术分享</h5>
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1074/40/40" alt="会员头像" class="rounded-circle" width="28" height="28">
                                <span class="text-sm">陈码</span>
                            </div>
                            <p class="card-text text-sm text-muted mb-3">资深程序员，分享前端开发技术和编程学习经验，定期发布技术教程。</p>
                            <div class="d-flex justify-content-between stats text-muted">
                                <div><i class="fas fa-eye me-1"></i> 7.8k</div>
                                <div><i class="fas fa-heart me-1"></i> 3.5k</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 瀑布流项目 4 -->
                <div class="masonry-item">
                    <div class="card member-card">
                        <div class="image-container">
                            <img src="https://picsum.photos/id/1063/600/400" alt="手绘作品展示" class="card-img-top w-100" style="object-fit: cover;">
                            <span class="image-count">3</span>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title mb-2">插画师</h5>
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1077/40/40" alt="会员头像" class="rounded-circle" width="28" height="28">
                                <span class="text-sm">林画</span>
                            </div>
                            <p class="card-text text-sm text-muted mb-3">自由插画师，擅长治愈系风格插画创作，承接商业插画项目。</p>
                            <div class="d-flex justify-content-between stats text-muted">
                                <div><i class="fas fa-eye me-1"></i> 4.5k</div>
                                <div><i class="fas fa-heart me-1"></i> 2.2k</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 瀑布流项目 5 -->
                <div class="masonry-item">
                    <div class="card member-card">
                        <div class="image-container">
                            <div class="row g-1">
                                <div class="col-6">
                                    <img src="https://picsum.photos/id/1082/300/600" alt="手工制作1" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="col-6">
                                    <img src="https://picsum.photos/id/1083/300/600" alt="手工制作2" class="w-100 h-100 object-fit-cover">
                                </div>
                            </div>
                            <span class="image-count">6</span>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title mb-2">手工达人</h5>
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1084/40/40" alt="会员头像" class="rounded-circle" width="28" height="28">
                                <span class="text-sm">孙巧</span>
                            </div>
                            <p class="card-text text-sm text-muted mb-3">热爱手工制作，分享陶艺、编织等手工作品和制作教程。</p>
                            <div class="d-flex justify-content-between stats text-muted">
                                <div><i class="fas fa-eye me-1"></i> 3.7k</div>
                                <div><i class="fas fa-heart me-1"></i> 1.9k</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 3. 列表布局 -->
        <section class="mb-12">
            <h2 class="section-title mb-4">新加入会员</h2>
            <div class="card">
                <div class="list-group list-group-flush">
                    <!-- 列表项 1 -->
                    <div class="list-group-item list-item p-4">
                        <div class="d-flex flex-column md:flex-row gap-4">
                            <div class="md:w-1/4">
                                <div class="image-container rounded overflow-hidden">
                                    <img src="https://picsum.photos/id/1085/400/300" alt="音乐分享" class="w-100 h-100 object-fit-cover">
                                    <span class="image-count">1</span>
                                </div>
                            </div>
                            <div class="md:w-3/4">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5 class="mb-1">独立音乐人</h5>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <img src="https://picsum.photos/id/1086/40/40" alt="会员头像" class="rounded-circle" width="28" height="28">
                                            <span class="text-sm">吴乐</span>
                                            <span class="badge member-badge bg-info">新会员</span>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary">关注</button>
                                </div>
                                <p class="text-sm text-muted mb-3">
                                    原创音乐人，擅长民谣和流行音乐创作，已发布3首原创单曲，分享音乐创作过程和灵感。
                                </p>
                                <div class="d-flex gap-4 stats text-muted">
                                    <div><i class="fas fa-eye me-1"></i> 1.2k</div>
                                    <div><i class="fas fa-comment me-1"></i> 48</div>
                                    <div><i class="fas fa-bookmark me-1"></i> 96</div>
                                    <div><i class="fas fa-heart me-1"></i> 352</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 列表项 2 - 无图片 -->
                    <div class="list-group-item list-item p-4">
                        <div class="d-flex flex-column md:flex-row gap-4">
                            <div class="md:w-1/4">
                                <div class="no-image-placeholder rounded" style="height: 150px;">
                                    <i class="fas fa-language fa-3x"></i>
                                </div>
                            </div>
                            <div class="md:w-3/4">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5 class="mb-1">语言教师</h5>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <img src="https://picsum.photos/id/1087/40/40" alt="会员头像" class="rounded-circle" width="28" height="28">
                                            <span class="text-sm">郑语</span>
                                            <span class="badge member-badge bg-info">新会员</span>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary">关注</button>
                                </div>
                                <p class="text-sm text-muted mb-3">
                                    资深语言教师，精通英语、日语和韩语，分享语言学习技巧和文化差异，提供在线语言辅导。
                                </p>
                                <div class="d-flex gap-4 stats text-muted">
                                    <div><i class="fas fa-eye me-1"></i> 856</div>
                                    <div><i class="fas fa-comment me-1"></i> 124</div>
                                    <div><i class="fas fa-bookmark me-1"></i> 203</div>
                                    <div><i class="fas fa-heart me-1"></i> 421</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 列表项 3 - 多张图片 -->
                    <div class="list-group-item list-item p-4">
                        <div class="d-flex flex-column md:flex-row gap-4">
                            <div class="md:w-1/4">
                                <div class="image-container rounded overflow-hidden">
                                    <div class="row g-1 h-100">
                                        <div class="col-6 h-50">
                                            <img src="https://picsum.photos/id/1088/200/200" alt="园艺作品1" class="w-100 h-100 object-fit-cover">
                                        </div>
                                        <div class="col-6 h-50">
                                            <img src="https://picsum.photos/id/1089/200/200" alt="园艺作品2" class="w-100 h-100 object-fit-cover">
                                        </div>
                                        <div class="col-12 h-50">
                                            <img src="https://picsum.photos/id/1090/400/200" alt="园艺作品3" class="w-100 h-100 object-fit-cover">
                                        </div>
                                    </div>
                                    <span class="image-count">5+</span>
                                </div>
                            </div>
                            <div class="md:w-3/4">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5 class="mb-1">园艺爱好者</h5>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <img src="https://picsum.photos/id/1091/40/40" alt="会员头像" class="rounded-circle" width="28" height="28">
                                            <span class="text-sm">钱园</span>
                                            <span class="badge member-badge bg-info">新会员</span>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-outline-primary">关注</button>
                                </div>
                                <p class="text-sm text-muted mb-3">
                                    植物爱好者，擅长室内绿植养护和庭院设计，分享植物种植经验和园艺技巧，解答植物养护问题。
                                </p>
                                <div class="d-flex gap-4 stats text-muted">
                                    <div><i class="fas fa-eye me-1"></i> 732</div>
                                    <div><i class="fas fa-comment me-1"></i> 89</div>
                                    <div><i class="fas fa-bookmark me-1"></i> 156</div>
                                    <div><i class="fas fa-heart me-1"></i> 287</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 4. 大型特色会员展示 -->
        <section>
            <h2 class="section-title mb-4">特邀会员</h2>
            <div class="card member-card overflow-hidden">
                <div class="row">
                    <div class="col-md-5">
                        <div class="image-container h-100">
                            <img src="https://picsum.photos/id/1058/800/1000" alt="特邀会员作品展示" class="w-100 h-100 object-fit-cover">
                            <span class="image-count">16</span>
                            <span class="badge bg-primary featured-badge">特邀</span>
                        </div>
                    </div>
                    <div class="col-md-7 p-5">
                        <div class="d-flex justify-content-between align-items-start mb-4">
                            <div>
                                <h3 class="mb-2">国家地理摄影师</h3>
                                <div class="d-flex align-items-center gap-3">
                                    <img src="https://picsum.photos/id/1074/60/60" alt="特邀会员头像" class="rounded-circle" width="48" height="48">
                                    <div>
                                        <div class="font-medium">黄远</div>
                                        <div class="text-sm text-muted">国家地理签约摄影师 | 8年经验</div>
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary">立即关注</button>
                        </div>
                        
                        <p class="mb-5">
                            国家地理杂志签约摄影师，专注于野生动物和自然环境摄影，曾多次深入亚马逊雨林、非洲大草原等地区进行拍摄，作品展现了大自然的壮美与生命的力量。定期举办摄影工作坊，分享专业摄影技巧。
                        </p>
                        
                        <div class="row mb-5">
                            <div class="col-3 text-center">
                                <div class="fs-4 fw-bold">246k</div>
                                <div class="text-sm text-muted">粉丝</div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="fs-4 fw-bold">138</div>
                                <div class="text-sm text-muted">作品</div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="fs-4 fw-bold">4.9</div>
                                <div class="text-sm text-muted">平均评分</div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="fs-4 fw-bold">12</div>
                                <div class="text-sm text-muted">工作坊</div>
                            </div>
                        </div>
                        
                        <div class="d-flex gap-3 stats text-muted">
                            <div class="fs-5"><i class="fas fa-eye me-1"></i> 1.2M</div>
                            <div class="fs-5"><i class="fas fa-comment me-1"></i> 24.5k</div>
                            <div class="fs-5"><i class="fas fa-bookmark me-1"></i> 87.3k</div>
                            <div class="fs-5"><i class="fas fa-heart me-1"></i> 356k</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8 mt-12">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-6">
                    <h5 class="mb-3">社交平台</h5>
                    <p class="text-muted">连接人与人，分享美好生活</p>
                    <div class="d-flex gap-3 mt-4">
                        <a href="#" class="text-white"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-wechat fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-instagram fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-twitter fa-lg"></i></a>
                    </div>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">首页</a></li>
                        <li><a href="#" class="text-muted">会员推荐</a></li>
                        <li><a href="#" class="text-muted">发现</a></li>
                        <li><a href="#" class="text-muted">话题</a></li>
                    </ul>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">帮助中心</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">使用指南</a></li>
                        <li><a href="#" class="text-muted">常见问题</a></li>
                        <li><a href="#" class="text-muted">联系我们</a></li>
                        <li><a href="#" class="text-muted">举报中心</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5 class="mb-3">订阅最新动态</h5>
                    <p class="text-muted mb-3">获取精选会员推荐和平台最新资讯</p>
                    <div class="input-group">
                        <input type="email" class="form-control" placeholder="您的邮箱地址">
                        <button class="btn btn-primary" type="button">订阅</button>
                    </div>
                </div>
            </div>
            <div class="border-top border-gray-700 mt-6 pt-6 text-center text-muted">
                <p>&copy; 2023 社交平台 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 关注按钮交互
        document.querySelectorAll('button:contains("关注")').forEach(button => {
            button.addEventListener('click', function() {
                if (this.textContent.includes('关注')) {
                    this.textContent = '已关注';
                    this.classList.remove('btn-outline-primary');
                    this.classList.add('btn-success');
                    this.innerHTML = '<i class="fas fa-check me-1"></i>已关注';
                } else {
                    this.textContent = '关注';
                    this.classList.remove('btn-success');
                    this.classList.add('btn-outline-primary');
                    this.innerHTML = '关注';
                }
            });
        });
        
        // 图片懒加载初始化
        document.addEventListener("DOMContentLoaded", function() {
            const lazyImages = document.querySelectorAll("img");
            
            if ("IntersectionObserver" in window) {
                const imageObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const image = entry.target;
                            image.classList.add('opacity-100');
                            image.classList.remove('opacity-0');
                            imageObserver.unobserve(image);
                        }
                    });
                });
                
                lazyImages.forEach(image => {
                    imageObserver.observe(image);
                    image.classList.add('transition-opacity', 'duration-500', 'opacity-0');
                });
            }
        });
    </script>
</body>
</html>
    
